<template>
	<view :class="['achieve',device == 'ios'?'iosPadding':'androidPadding']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title"></view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="container">
			<view class="bgColor dFlex flexDirection jCenter_aCenter">
				<text>本月总收入</text>
				<view class="showCount">{{datas.sum3}}</view>
				<!-- <view class="tools dFlex jAround_aCenter">
					<view class="toolOne"> 
						<text>洗护券</text>
						<view class="toolNum">2</view>
					</view>
					<view class="toolOne">
						<text>洗护卡</text> 
						<view class="toolNum">2</view>
					</view>
				</view> -->
			</view>
			<view class='tj dFlex jBetween_aCenter'>
				<view class='screenTime'>
					<picker mode="date" @change="selTime" fields='month'>
						<view>{{year+'-'+month}}</view>
					</picker>
				</view>
				<view class='entry dFlex jEnd_aCenter'>
					<view class='one'>累计订单<text>{{datas.sum2}}</text></view>
					<view class='one'>累计收入<text>{{datas.sum3}}</text></view>
				</view>
			</view>
			<view class='list' v-if="list.length">
				<view class='line' v-for="(item,index) in list" :key='index'>
					<view class='showTime'>{{item.date}}</view>
					<view class='content dFlex jAround_aCenter fWap'>
						<view class='item'>
							<view class='itemTit'>订单总数（笔）</view>
							<view class='itemVal'>{{item.sum1?item.sum1:'0'}}</view>
						</view>
						<view class='item'>
							<view class='itemTit'>有效订单（笔）</view>
							<view class='itemVal'>{{item.sum2?item.sum2:'0'}}</view>
						</view>
						<view class='item'>
							<view class='itemTit'>当日业绩（元）</view>
							<view class='itemVal'>{{item.sum3?item.sum3:'0'}}</view>
						</view>
						<view class='item'>
							<view class='itemTit'>当日收益（元）</view>
							<view class='itemVal'>{{item.sum4?item.sum4:'0'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list empty imgPublic" v-else>
				<image src="../static/images/empty.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year:new Date().getFullYear(),
				month:new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1),
				datas:{},
				page:1,
				load:false,
				list:[],
			};
		},
		onLoad() {
			this.initData();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initData();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 数据
			initData(){
				this.tool.getData('User/finance',{
					storeId:uni.getStorageSync('storeId')?uni.getStorageSync('storeId'):'',
					page:this.page,
					year:this.year,
					month:this.month,
					type:'6'
				}).then(res=>{
					console.log(res);
					if(res){
						this.datas = res;
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 选择日期
			selTime(e){
				this.year = e.detail.value.split('-')[0];
				this.month = e.detail.value.split('-')[1];
				this.page = 1;
				this.initData();
			}
		}
	}
</script>

<style lang="scss">
	.achieve{
		width: 100%;
		.list{
			width: 94%;
			margin:0 auto;
			.line{
				width: 100%;
				background:white;
				margin-bottom:10px;
				padding:0 18px;
				box-sizing:border-box;
				.content{
					width: 100%;
					.item{
						width:50%;
						margin-bottom:30px;
						font-size:15px;
						color:#999999;
						.itemVal{
							font-size: 18px;
							color:#333333;
							font-weight:bold;
							margin-top:4px;
						}
					}
				}
				.showTime{
					width: 100%;
					font-size: 18px;
					font-weight: bold;
					padding:20px 0 30px;
				}
			}
		}
		.tj{
			width: 94%;
			margin:18px auto 14px;
			.entry{
				width:max-content;
				.one{
					width:max-content;
					padding:0 4px;
					font-size: 13px;
					color:#999999;
					text{
						color:#111111;
						margin-left:2px;
					}
				}
			}
			.screenTime{
				padding:6px 18px;
				background:white;
				font-size: 12px;
				border-radius:4px;
				font-weight: bold;
			}
		}
		.bgColor{
			width: 100%;
			background: linear-gradient(0deg,#609ff8 0%, #2d67d2 100%);
			// height: calc(195px - var(--status-bar-height) - 57px);
			padding: 16px 0 20px;
			color: white;
			font-size: 16px;
			.showCount{
				font-size: 30px;
				font-weight: bold;
				margin-top: 6px;
			}
			.tools{
				width: 90%;
				margin: 22px auto 12px;
				.toolOne{
					flex: 1;
					text-align: center;
					font-size: 14px;
					.toolNum{
						font-size: 18px;
						margin-top: 4px;
					}
				}
			}
		}
	}
	.ios_pageTitle,
	.and_pageTitle {
		background: #2D67D2;
		color: white;
	}
</style>
